﻿<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>轨迹回放</title>
	<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
	<style>
		html, body, #container {
			height: 100%;
			width: 100%;
		}

		.input-card .btn{
			margin-right: 1.2rem;
			width: 9rem;
		}

		.input-card .btn:last-child{
			margin-right: 0;
		}
	</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
	<h4>轨迹回放控制</h4>
	<div class="input-item">
		<input type="button" class="btn" value="开始动画" id="start"/>
		<input type="button" class="btn" value="暂停动画" id="pause"/>
	</div>
	<div class="input-item">
		<input type="button" class="btn" value="继续动画" id="resume"/>
		<input type="button" class="btn" value="停止动画" id="stop"/>
	</div>
</div>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1c92d37732848ca864c4daac21454294"></script>
<script>
	// var marker,lineArr;

	var trackId = '[[${trackId}]]';
	var carId = '[[${carId}]]';

	$.ajax({
		url:'/cars/track/getData',
		data:{'trackId':trackId,'carId':carId},
		type:'POST',
		dataType: 'json',
		success:function (e) {
			var location = e[0].startPoint.location.split(",");

			var end = e[0].endPoint.location.split(",");

			var marker,lineArr = [];

			var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [location[0],location[1]],
				zoom: 13
			});

			marker = new AMap.Marker({
				map: map,
				position:[location[0],location[1]],
				icon: "http://webapi.amap.com/images/car.png",
				offset: new AMap.Pixel(-26, -13),
				autoRotation: true
			});

			// 创建一个 Icon
			var startIcon = new AMap.Icon({
				// 图标尺寸
				size: new AMap.Size(25, 34),
				// 图标的取图地址
				image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
				// 图标所用图片大小
				imageSize: new AMap.Size(135, 40),
				// 图标取图偏移量
				imageOffset: new AMap.Pixel(-9, -3),
				zIndex: 999
			});

			// 将 icon 传入 marker
			var startMarker = new AMap.Marker({
				position: new AMap.LngLat(location[0],location[1]),
				icon: startIcon,
				offset: new AMap.Pixel(-13, -30)
			});

			// 创建一个 icon
			var endIcon = new AMap.Icon({
				size: new AMap.Size(25, 34),
				image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
				imageSize: new AMap.Size(135, 40),
				imageOffset: new AMap.Pixel(-95, -3),
				zIndex: 999
			});

			// 将 icon 传入 marker
			var endMarker = new AMap.Marker({
				position: new AMap.LngLat(end[0],end[1]),
				icon: endIcon,
				offset: new AMap.Pixel(-13, -30)
			});

			map.add([startMarker, endMarker]);

			$.each(e[0].points,function (index,value) {
				var pos = value.location.split(",");
				lineArr.push([pos[0],pos[1]]);
			});

			// 绘制轨迹
			var polyline = new AMap.Polyline({
				map: map,
				path: lineArr,
				showDir:true,
				strokeColor: "#28F",  //线颜色
				// strokeOpacity: 1,     //线透明度
				strokeWeight: 6,      //线宽
				// strokeStyle: "solid"  //线样式
			});

			var passedPolyline = new AMap.Polyline({
				map: map,
				// path: lineArr,
				strokeColor: "#AF5",  //线颜色
				// strokeOpacity: 1,     //线透明度
				strokeWeight: 6,      //线宽
				// strokeStyle: "solid"  //线样式
			});

			marker.on('moving', function (e) {
				passedPolyline.setPath(e.passedPath);
			});

			map.setFitView();

			AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
				marker.moveAlong(lineArr, 500,function(k){
					return k;
				});
			}, false);

			AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
				marker.pauseMove();
			}, false);
			AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
				marker.resumeMove();
			}, false);
			AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
				marker.stopMove();
			}, false);
		}
	});


	/*var marker, lineArr = [
	    [116.478935,39.997761],
        [116.478939,39.997825],
        [116.478912,39.998549],
        [116.478912,39.998549],
        [116.478998,39.998555],
        [116.478998,39.998555],
        [116.479282,39.99856],
        [116.479658,39.998528],
        [116.480151,39.998453],
        [116.480784,39.998302],
        [116.480784,39.998302],
        [116.481149,39.998184],
        [116.481573,39.997997],
        [116.481863,39.997846],
        [116.482072,39.997718],
        [116.482362,39.997718],
        [116.483633,39.998935],
        [116.48367,39.998968],
        [116.484648,39.999861],
    ];*/

	/*var map = new AMap.Map("container", {
		resizeEnable: true,
		zoom: 17
	});

	marker = new AMap.Marker({
		map: map,
		position: [116.478935,39.997761],
		icon: "https://webapi.amap.com/images/car.png",
		offset: new AMap.Pixel(-26, -13),
		autoRotation: true,
		angle:-90,
	});

	// 绘制轨迹
	var polyline = new AMap.Polyline({
		map: map,
		path: lineArr,
		showDir:true,
		strokeColor: "#28F",  //线颜色
		// strokeOpacity: 1,     //线透明度
		strokeWeight: 6,      //线宽
		// strokeStyle: "solid"  //线样式
	});

	var passedPolyline = new AMap.Polyline({
		map: map,
		// path: lineArr,
		strokeColor: "#AF5",  //线颜色
		// strokeOpacity: 1,     //线透明度
		strokeWeight: 6,      //线宽
		// strokeStyle: "solid"  //线样式
	});


	marker.on('moving', function (e) {
		passedPolyline.setPath(e.passedPath);
	});

	map.setFitView();

	function startAnimation () {
		marker.moveAlong(lineArr, 200);
	}

	function pauseAnimation () {
		marker.pauseMove();
	}

	function resumeAnimation () {
		marker.resumeMove();
	}

	function stopAnimation () {
		marker.stopMove();
	}*/
</script>
</body>
</html>
